<template>
  <div class="check_wrap">
    <header>
       <p><img src="../assets/img/left@2x.png" @click = "back"></p>
       <p>查询</p>
       <p></p>
    </header>
    <div class="checker_wrap">
      <div class="yu_e">
        <div class="title">加油卡余额</div>
        <div class="money">
          <span>￥10,000.00</span><span class="go_recharge">去充值</span>
        </div>
      </div>
      <div class="detail_list">
        <h2>消费明细</h2>
        <div class="timer">
          <time></time>至<time></time><span>查询</span>
        </div>
      </div>
      <div class="consume_list">
        <ul>
          <li>
            <span>消费时间</span>
            <span>消费加油站</span>
            <span>消费金额</span>
          </li>
        </ul>
        <ol>
          <li>
            <time>2015-5-1 10:00</time>
            <span class="dress">济南西加油站</span>
            <span class="amount">200</span>
          </li>
          <li>
            <time>2015-5-1 10:00</time>
            <span class="dress">济南西加油站</span>
            <span class="amount">200</span>
          </li>
          <li>
            <time>2015-5-1 10:00</time>
            <span class="dress">济南西加油站</span>
            <span class="amount">200</span>
          </li>
          <li>
            <time>2015-5-1 10:00</time>
            <span class="dress">济南西加油站</span>
            <span class="amount">200</span>
          </li>
        </ol>
      </div>
      <div class="adds">
        总计：<span>￥10000</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'open_card',
  data () {
    return {
      msg: 'Welcome to mine.vue'
    }
  },
  methods: {
    back: function (){
      this.$router.back()
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang = 'less'>
@import '../assets/less/style.less';
.check_wrap {
  height: 100%;
  background: #f7f7f7;
  header {
      width: 100%;
     .px2rem(height,88);
      background: #21d094;
      display: flex;
      align-items: center;
      justify-content: space-between;
      p:nth-child(1) {
        flex: 1;
        .font(30,#fff);
        .padding-left(35);
        img {
          .px2rem(height,39);
          .px2rem(width,39);
        }
      }
      p:nth-child(2) {
        flex: 2;
        text-align: center;
        .font(34,#fff);
      }
      p:nth-child(3) {
        flex: 1;
        text-align: right;
        padding-right: 4%;
        .font(30,#fff);
      }
    }
    .checker_wrap {
      .yu_e{
        .title {
          .margin-top(28);
          .margin-left(50)
        }
        .money {
          .margin(50,0,100,170);
          .font(45,#2bb663);
          display: flex;
          align-items: center;
          span {
              display: block;
              .line-height(58);
            }
          .go_recharge {
            .font(28,#fff);
            background: #2bb663;
            .padding-left(15);
            .padding-right(15);
            .border-radius(8);
            .margin-left(70);
          }
        }
      }
      
    }
    .detail_list{
      h2 {
        background: #fff;
        .line-height(38);
        .padding-left(34);
      }
      .timer {
        .px2rem(height,42);
        display: flex;
        align-items: center;
        .padding(36,0,66,24);
        time {
          display: block;
          .px2rem(height,40);
          .px2rem(width,130);
          .border(1,solid,#999999);
          .border-radius(6);
        }
        span {
          .margin-left(18);
          .px2rem(width,84);
          .px2rem(height,40);
          .line-height(40);
          background: #2bb663;
          text-align: center;
          color: #fff;
          .border-radius(6);
        }
      }
    }
    .consume_list {
      ul {
        
        li {
          display: flex;
          background: #efefef;
          .line-height(60);
          span {
            flex: 1;
            text-align: center;
          }
        }
      }
      ol {
        
        li {
          display: flex;
          .line-height(72);
          .border-bottom(1,solid,#c9c9c9);
          span {
            flex: 1;
            text-align: center;
          }
          time {
            text-align: center;
            flex: 1;
          }
        }
      }
    }
    .adds {
      display: flex;
      justify-content: flex-end;
      .margin-right(66);
      .margin-top(54);
      .font(40,#333);
      font-weight: bold;
    }
  }


</style>

